<template>
	<view class="addOrder">
		<view class="dheader">
			<view class="shop">
				<image :src="shop_info.category_image" mode="aspectFill" class="Boutique"></image>
				<view class="title">
					{{shop_info.shop_name}}
				</view>
				<view class="right" @click="toggle">
					<view class="size">
						切换
					</view>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
				</view>
			</view>
		</view>
		<view class="card" :style="{bottom: changeBottomVal}">
			<view class="row_box mb">
				<view class="left">
					<view class="required">
						*
					</view>
					<view class="size">
						订单类型
					</view>
				</view>
				<view class="right_box">
					<view v-for="(item,index) in typeList" :key="index" class="type" @click="changeTypeIndex(index)">
						<image
							:src="typeIndex == index ? $IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
							mode="" class="icont"></image>
						<view class="size">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="comlum_Y" v-if="!typeIndex">
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							卡使用类型
						</view>
					</view>
					<view class="right_box">
						<view v-for="(item,index) in cardList" :key="index" class="type"
							@click="changeCardIndex(index)">
							<image
								:src="cardIndex == index ? $IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
								mode="" class="icont"></image>
							<view class="size">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							卡类型
						</view>
					</view>
					<view class="right_box" @click="openCardShow">
						<view class="size1" :style="{color:query.card_id?'':'#999999'}">
							{{query.card_id?findshopName(Cardparams,query.card_id):'请选择卡类型'}}
						</view>
						<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
					</view>
				</view>
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							天数
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" :custom-style="INPUTSTYLE" height="28"
							placeholder-style="color:#73F0EA;" placeholder="--" input-align="right" disabled
							v-model="day" :clearable="false" />
						<view class="unit" style="color: #73F0EA">
							天
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							赠送
						</view>
					</view>
					<view class="right_box">
						<u-input type="number" :border="false" placeholder="请填写赠送" input-align="right" height="28"
							v-model="query.give_days" :clearable="false" />
						<view class="unit" style="color: #000000">
							天
						</view>
					</view>
				</view>
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							总价
						</view>
					</view>
					<view class="right_box">
						<u-input type="number" :border="false" placeholder-style="color:#73F0EA;" placeholder="--"
							input-align="right" :custom-style="INPUTSTYLE" height="28" disabled v-model="price"
							:clearable="false" />
						<view class="unit" style="color: #73F0EA">
							元
						</view>
					</view>
				</view>
				<view class="row_box ">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							优惠
						</view>
					</view>
					<view class="right_box">
						<u-input type="number" :border="false" placeholder="请输入优惠金额" input-align="right" height="28"
							v-model="conponNum" @input="checkCouponAmount(price)" :clearable="false" />
						<view class="unit" style="color: #000000">
							元
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
					</view>
					<view class="right_box" v-if="couponAmountError">
						<view class="unit">
							优惠券金额不能超过订单总价！
						</view>
					</view>
				</view>
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							需支付
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder-style="color:#73F0EA;" placeholder="--"
							input-align="right" :custom-style="INPUTSTYLE" height="28" v-model="overNumber" disabled
							:clearable="false" />
						<view class="unit" style="color: #73F0EA">
							元
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">

						</view>
						<view class="size">
							会员姓名
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder="请填写会员姓名" input-align="right" height="28"
							v-model="query.petname" :clearable="false" />
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">

						</view>
						<view class="size">
							会员手机号
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder="请填写会员手机号" input-align="right" height="28"
							v-model="query.telephone" :clearable="false" maxlength="11" />
					</view>
				</view>
				<view class="comlum_Y">
					<view class="comlum_left">
						<view class="size">
							订单备注
						</view>
					</view>
					<u-input type="textarea" :border="false" height="230" placeholder="请填写订单备注"
						:custom-style="customStyle" :auto-height="false" :clearable="false" v-model="query.remark" />
				</view>
			</view>
			<view class="comlum_Y" v-else>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							教练
						</view>
					</view>
					<view class="right_box" @click="coachShow = true">
						<view class="size1" :style="{color:classQuery.coach_id?'':'#999999'}">
							{{classQuery.coach_id ?findcoachName(coachList, classQuery.coach_id):'请选择教练'}}
						</view>
						<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							课程
						</view>
					</view>
					<view class="right_box" @click="openCoach">
						<view class="size1" :style="{color:query.course_id?'':'#999999'}">
							{{query.course_id ? findclassName(classList, query.course_id):'请选择课程'}}
						</view>
						<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
					</view>
				</view>
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							单价
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder-style="color:#73F0EA;" placeholder="--"
							input-align="right" :custom-style="INPUTSTYLE" height="28" v-model="classPrice" disabled
							:clearable="false" />
						<view class="unit" style="color: #73F0EA">
							元/节
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							节数
						</view>
					</view>
					<view class="right_box">
						<u-input type="number" :border="false" placeholder="请填写节数" input-align="right" height="28"
							v-model="query.num" :clearable="false" />
						<view class="unit" style="color: #000000">
							节
						</view>
					</view>
				</view>
				<!-- 				<view class="row_box mb">
					<view class="left">
					</view>
					<view class="right_box" v-if="classAmountError">
						<view class="unit">
							课程节数不能小于{{minNum}}节！
						</view>
					</view>
				</view> -->
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							总价
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder-style="color:#73F0EA;" placeholder="--"
							input-align="right" :custom-style="INPUTSTYLE" height="28" v-model="classTotalPrice"
							disabled :clearable="false" />
						<view class="unit" style="color: #73F0EA">
							元
						</view>
					</view>
				</view>
				<view class="row_box">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							优惠
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder="请输入优惠金额" input-align="right" height="28"
							:clearable="false" v-model="conponNum" @input="checkCouponAmount(classTotalPrice)" />
						<view class="unit" style="color: #000000">
							元
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
					</view>
					<view class="right_box" v-if="couponAmountError">
						<view class="unit">
							优惠券金额不能超过订单总价！
						</view>
					</view>
				</view>
				<view class="row_box mb" @click.stop="openToast">
					<view class="left">
						<view class="required">
							*
						</view>
						<view class="size">
							需支付
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder-style="color:#73F0EA;" placeholder="--"
							input-align="right" :custom-style="INPUTSTYLE" height="28" v-model="settlement" disabled
							:clearable="false" />
						<view class="unit" style="color: #73F0EA">
							元
						</view>
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">
						</view>
						<view class="size">
							会员姓名
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder="请填写会员姓名" input-align="right" height="28"
							v-model="query.petname" :clearable="false" />
					</view>
				</view>
				<view class="row_box mb">
					<view class="left">
						<view class="required">

						</view>
						<view class="size">
							会员手机号
						</view>
					</view>
					<view class="right_box">
						<u-input type="text" :border="false" placeholder="请填写会员手机号" input-align="right" height="28"
							v-model="query.telephone" :clearable="false" maxlength="11" />
					</view>
				</view>
				<view class="comlum_Y">
					<view class="comlum_left">
						<view class="size">
							订单备注
						</view>
					</view>
					<u-input type="textarea" :border="false" height="230" placeholder="请填写订单备注" :custom-style="customStyle" :auto-height="false"
						v-model="query.remark" :clearable="false" />
				</view>
			</view>
		</view>
		<view class="empty">
		</view>
		<view class="foot">
			<view class="btn" @click.stop="getstoreorderCreate">
				确认添加
			</view>
		</view>
		<u-picker mode="selector" v-model="cardShow" :range="Cardparams" range-key="title" :customTimeTag="true"
			:title="'选择卡类型'" :popupheight="'786rpx'" :borderRadius="16" @confirm="dateConfirm"></u-picker>
		<FieldPopupVue :popupShow="popupShow" :FieldList="Field" @sure="sure" @changeActiveIndex="changeActiveIndex"
			:activeIndex="FieldIndex"></FieldPopupVue>
		<popupVue :couponShow="classShow" @sure="ClassSure" @close="Classclose" :title="'选择课程'" :height="'1080rpx'"
			:flexHeight="'850rpx'" :btnShow="true">
			<view class="comlum_Y2">
				<u-search placeholder="搜索课程" :show-action="false" class="search-input"></u-search>
				<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="classtolower">
					<view class="comlum_Y2">
						<view v-for="(item,index) in classList" :key="index" class="classItem">
							<view class="left4">
								{{item.title}}
							</view>
							<view class="distance" @click="changeClassIndex(index)">
								<image
									:src="classIndex == index ?$IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
									mode="" class="radio"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popupVue>
		<popupVue :couponShow="coachShow" @sure="CoachSure" @close="Coachclose" :title="'选择教练'" :height="'1080rpx'"
			:flexHeight="'850rpx'" :btnShow="true">
			<view class="comlum_Y2">
				<u-search placeholder="搜索教练" :show-action="false" class="search-input" v-model="coachQuery.search"
					@change="coachSeach"></u-search>
				<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="coachtolower">
					<view class="comlum_Y2">
						<view v-for="(item,index) in coachList" :key="index" class="classItem">
							<view class="left5">
								<image :src="item.avatar" mode="aspectFill" class="img"></image>
								<view class="size">
									{{item.nickname}}
								</view>
							</view>
							<view class="distance" @click="changeCoachIndex(index)">
								<image
									:src="coachIndex == index ?$IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
									mode="" class="radio"></image>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</scroll-view>
			</view>
		</popupVue>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import FieldPopupVue from '../../pages/user/components/Field-popup.vue'
	import popupVue from '@/components/popup.vue'
	import {
		atShop,
		storeorderCreate,
		storemainCardList,
		storeCouponCreate,
		storemainCoachList,
		storemainCourseList
	} from '@/api/manager.js'
	export default {
		components: {
			FieldPopupVue,
			popupVue
		},
		data() {
			return {
				changeBottomVal: 0,
				status: 'loadmore', //当前状态
				shop_info: {},
				query: {
					form: 'card',
					card_form: 'normal',
					card_id: '',
					give_days: '',
					coupon_cost: '',
					remark: '',
					course_id: '',
					num: '',
					petname: '',
					telephone: ''
				},
				price: '',
				day: '',
				classPrice: '',
				minNum: null,
				// overNumber:null,
				conponNum: null,
				couponAmountError: false, // 优惠券金额是否错误
				classAmountError: false, // 课程节数金额是否错误
				// 课程
				classShow: false,
				coachShow: false,
				cardShow: false,
				shopName: '温州中庚漫游天地店',
				typeList: [
					'VIP会员',
					'私教课'
				],
				typeIndex: 0,
				cardList: [
					'通用',
					'单店'
				],
				Cardparams: [
					'月卡',
					'季卡',
					'半年卡',
					'年卡'
				],
				cardIndex: 0,
				caryType: null,
				customStyle: {
					background: '#f6f6f6',
					padding: '32rpx',
					borderRadius: '16rpx'
				},
				INPUTSTYLE: {
					color: '#73F0EA'
				},
				popupShow: false,
				Field: [{
					title: '温州中庚漫游天地店',
					juli: '139m'

				}, {
					title: '温州娄桥亿象城店',
					juli: '139m'
				}],
				FieldIndex: -1,
				classList: [],
				classIndex: null,
				coachList: [],
				coachIndex: null,
				coachQuery: {
					search: '',
					page: 1
				},
				classQuery: {
					coach_id: '',
					search: '',
					page: 1
				},
			}
		},
		onReady() {},
		onLoad() {
			this.getatShop()
			this.getstoremainCardList()

		},
		mounted() {
			this.getstoremainCoachList()
		},
		computed: {
			settlement() {
				if (this.classTotalPrice) {
					return Number(this.classTotalPrice) - this.conponNum
				} else {
					return null
				}
			},
			classTotalPrice() {
				if (this.query.num) {
					return this.classPrice * this.query.num
				} else {
					return null
				}
			},
			overNumber() {
				if (this.price) {
					return parseFloat((Number(this.price) - this.conponNum).toFixed(2))
				} else {
					return null
				}
			}
		},
		methods: {
			openToast() {
				// uni.showToast({
				// 	title: '输入框禁用‌，‌请检查',
				// 	icon: 'none'
				// })
			},
			classtolower() {
				this.classQuery.page++
				this.getstoremainCourseList()
			},
			getstoremainCourseList() {
				storemainCourseList(this.classQuery).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.classList = this.classList.concat(res.data.list)
						}

						console.log('classList', this.classList);
					}
				})
			},
			openCoach() {
				if (this.classQuery.coach_id) {
					this.classList = []
					this.getstoremainCourseList()
					this.classShow = true
				} else {
					const that = this
					uni.showModal({
						title: '请选择教练',
						content: '在选择课程前，请确保您已经选择了合适的教练',
						showCancel: true,
						cancelText: '不同意',
						confirmText: '同意',
						confirmColor: '#73F0EA',
						success: function(res) {
							if (res.confirm) {
								that.coachShow = true
								// 用户点击了同意按钮，执行相应的逻辑
								console.log('用户已同意协议');
							} else if (res.cancel) {
								// 用户点击了不同意按钮，可以执行退出应用或阻止后续操作的逻辑
								console.log('用户未同意协议');
							}
						}
					});
				}

			},
			coachSeach() {
				this.coachQuery.page = 1
				this.coachList = []
				this.getstoremainCoachList()
			},
			coachtolower() {
				this.coachQuery.page++
				this.getstoremainCoachList()
			},
			findclassName(data, id) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.course_id == id) {
							dName = i.title
						}
					})
				}
				// 返回结果数组
				return dName;
			},
			findcoachName(data, id) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.coach_id == id) {
							dName = i.nickname
						}
					})
				}
				// 返回结果数组
				return dName;
			},
			getstoremainCoachList() {
				storemainCoachList(this.coachQuery).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.coachList = this.coachList.concat(res.data.list)
						}

						console.log('coachList', this.coachList);
					}
				})
			},
			changeCardIndex(index) {
				this.cardIndex = index
				this.query.card_id = ''
				this.day = ''
				this.price = ''
				if (!index) {
					this.query.card_form = 'normal'
				} else {
					this.query.card_form = 'single'
				}
				this.getstoremainCardList()
			},
			changeTypeIndex(index) {
				this.typeIndex = index
				if (!index) {
					this.query.form = 'card'
				} else {
					this.query.form = 'course'
				}
			},
			getstoreorderCreate() {
				this.query.coupon_cost = this.conponNum
				storeorderCreate(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon: false,
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			checkCouponAmount(data) {
				console.log('1321');
				const amount = parseFloat(this.conponNum);
				if (isNaN(amount) || amount > data) {
					this.conponNum = ''; // 可以选择清空输入框或设置为最大值
					this.couponAmountError = true;
				} else {
					this.couponAmountError = false;
				}
			},
			findshopName(data, id) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.card_id == id) {
							dName = i.title
						}
					})
				}
				// 返回结果数组
				return dName;
			},
			getstoremainCardList() {
				const obj = {
					shop_id: this.query.shop_id,
					form: this.query.card_form
				}
				storemainCardList(obj).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.Cardparams = res.data
					}
				})
			},
			openCardShow() {
				this.cardShow = true
			},
			getatShop(e) {
				atShop(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop_info = res.data
					}
				})
			},
			// 切换门店
			toggle() {
				console.log(11);
				this.popupShow = true
			},
			changeActiveIndex(item, index) {
				this.FieldIndex = index
				this.getatShop({
					shop_id: item.shop_id
				})
			},
			sure() {
				this.popupShow = false
			},
			dateConfirm(e) {
				console.log('e', e);
				if (this.Cardparams.length) {
					this.query.card_id = this.Cardparams[e].card_id
					this.day = this.Cardparams[e].days
					this.price = this.Cardparams[e].price
				}
			},
			changeClassIndex(index) {
				this.query.course_id = this.classList[index].course_id
				this.classPrice = this.classList[index].price
				this.query.num = this.classList[index].num
				this.minNum = this.classList[index].num
				this.classIndex = index
			},
			changeCoachIndex(index) {
				this.coachIndex = index

			},
			ClassSure() {
				this.classShow = false
			},
			Classclose() {
				this.classShow = false
			},
			CoachSure() {
				if (this.coachList.length) {
					this.classQuery.coach_id = this.coachList[this.coachIndex].coach_id
				}
				this.coachShow = false
			},
			Coachclose() {
				this.coachShow = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.icon {
		width: 10rpx;
		height: 16rpx;
	}

	.addOrder {
		display: flex;
		flex-direction: column;
		align-items: center;

		.dheader {
			width: 750rpx;
			background: #ffffff;
			padding: 26rpx 34rpx;

			.shop {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.Boutique {
					width: 114rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.title {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						margin-right: 8rpx;
					}


				}
			}
		}

		.card {
			margin-top: 24rpx;
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx;

			.mb {
				margin-bottom: 48rpx;
			}

			.comlum_Y {
				width: 100%;
				display: flex;
				flex-direction: column;

				.comlum_left {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					flex: 1;
					margin-bottom: 24rpx;

					.required {
						color: #f37364;
					}

					.size {
						color: #333333;
					}
				}
			}

			.row_box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					flex: 1;

					.required {
						color: #f37364;
					}

					.size {
						color: #333333;
					}
				}

				.right_box {
					display: flex;
					flex-direction: row;
					align-items: center;

					.unit {
						margin-left: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: right;
						color: #000000;
					}

					.type {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 20rpx;

						.icont {
							width: 36rpx;
							height: 36rpx;
							margin-right: 8rpx;
						}

						.size {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: right;
							color: #000000;
						}
					}

					.size1 {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						margin-right: 8rpx;
					}

					.unit {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
					}
				}
			}
		}

		.empty {
			width: 100%;
			height: 180rpx;
		}

		.foot {
			z-index: 999;
			width: 750rpx;
			height: 160rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			padding-top: 10rpx;

			.btn {
					z-index: 9999;
				width: 710rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.comlum_Y2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.search-input {
			width: 702rpx;
			height: 66rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}

		.classItem {
			width: 702rpx;
			height: 88rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 24rpx;

			.left5 {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;

				.img {
					width: 40rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.size {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
				}
			}

			.left4 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #000000;
				flex: 1;
			}

			.distance {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size_s {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #999999;
					margin-right: 16rpx;
				}

				.radio {
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid #73F0EA;
					border-radius: 50%;
				}
			}
		}
	}
</style>